<template>
	<div class="f-c-c border vh100 bb">
		<div>
			<span>用户名：</span>
			<el-input placeholder="请输入" v-model.trim="userName" style="width:400px"></el-input>
			<el-button type="primary" @click="startChat()">开始聊天</el-button>
		</div>
	</div>
</template>

<script>


export default {
	data() {
		return {
			userName: '',
		}
	},
	methods: {
		async startChat() {
			if (this.userName.length > 2) {
				let flag = false
				let res = await new Promise((resolve, reject) => {
					this.$socket.emit('checkUser', this.userName, (data) => {
						resolve(data)
					})
				})
				flag = res
				if (!flag) {
					sessionStorage.setItem('userName', this.userName)
					this.$router.push('/')
				} else {
					this.$message.warning('该用户名已被占用')
				}

			} else {
				this.$message.warning('请填写三位以上的名字')
			}
		}
	}
}
</script>

<style>
</style>